<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<div class="tableBox">
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<span class="detailTableImgSmall"></span>
						<p class="text">订单基础信息</p>
						<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="onDialogEdit(true,'tableFormInline')">
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">
					</div>
					<el-form :inline="true" v-show="Model.detailTableFrom.flag">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<span class="detailTableImgSmall"></span>
						<p class="text">订单明细</p>
						<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
					</div>
					<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
						<el-table :data="Model.tableData" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
							<el-table-column type="index" width="50" label="序号" fixed></el-table-column>
							<el-table-column prop="customNumber" label="定制编号" width="100"></el-table-column>
							<el-table-column prop="productType" label="产品类型" width="120"></el-table-column>
							<el-table-column prop="category" label="品类" width="120"></el-table-column>
							<el-table-column prop="description">
								<template slot="header" slot-scope="scope">
									<el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
										<span>描述 ？ </span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column prop="lettering" label="刻字" width="120"></el-table-column>
							<el-table-column prop="deliveryTime" label="预计交期" width="200"></el-table-column>
							<el-table-column prop="price" label="价格" width="120"></el-table-column>
							<el-table-column prop="specialCustom" label="特殊定制要求" width="120"></el-table-column>
							<el-table-column prop="remark" label="备注" width="120"></el-table-column>
							<el-table-column prop="mainCount" label="主数量" width="120"></el-table-column>
							<el-table-column fixed="right" :label="$t('common.handleOption')" width="150">
								<template slot-scope="scope">
									<div class="btnGroup">
										<div class="operate-btn" @click="changeGood" v-if="scope.row.optionFlag!=1 && scope.$index+1 == Model.tableData.length">变更商品</div>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-row>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<span class="detailTableImgSmall"></span>
						<p class="text">添加用户退款帐户</p>
						<img class="detailTableImgNormal" :src="Model.tab1TableDetail2.src" alt="" @click="toggleTableDetail('tab1TableDetail2')">

					</div>
					<div class="formInline" v-show="Model.tab1TableDetail2.flag">
						<div class="normalButton" @click="addReturnDialogShow(true)">
							添加退款帐户
						</div>
					</div>
					<div class="detailTableDetail">
						<el-table :data="Model.returnTable" border style="width: 100%;">
							<el-table-column prop="bankName" label="开户银行"></el-table-column>
							<el-table-column prop="bankDeposit" label="收款人姓名"></el-table-column>
							<el-table-column prop="account" label="银行卡卡号"></el-table-column>
						</el-table>
					</div>
					<div class="formInline">
						<div>
							<span>
								其他信息修改：
							</span>
							<span>
								{{'暂无'}}
							</span>
						</div>
						<div>
							<span>
								是否需要延期发货：
							</span>
							<span>
								<el-date-picker v-model="Model.deliveryDatePick" size="small" type="date" placeholder="选择日期"></el-date-picker>
								{{'不能早于2019年1月4日'}}
							</span>
						</div>
					</div>
					<div class="footerBtnBox">
						<div class="footerBtn" @click="addSaleGoods">提交售中变更单</div>
						<div class="footerBtn" @click="goBack()">取消</div>
					</div>
				</el-row>
			</div>

			<!-- 添加退款账号弹框 -->
			<el-dialog :visible.sync="Model.editUserDialogFlag" top="100px" class="viewDialog">
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">添加用户退款帐户</div>
				</div>
				<div style="padding:30px;background: #fff;">
					<el-form ref="form" label-width="120px" size="small" style="margin: auto;">
						<el-form-item label="开户银行：">
							<el-select style="width:250px" size="small" v-model="Model.editUserDialogData[0].value" placeholder="请选择">
								<el-option v-for="(item,index) in Model.editUserDialogOption" :key="index" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="收款人姓名：">
							<el-input style="width:250px" size="small" v-model="Model.editUserDialogData[1].value"></el-input>
						</el-form-item>
						<el-form-item label="银行卡卡号：">
							<el-input style="width:250px" size="small" v-model="Model.editUserDialogData[2].value"></el-input>
						</el-form-item>
					</el-form>
					<div class="viewDialogFooter">
						<div class="viewDialogFooterSure" @click="addReturn">
							确定
						</div>
						<div class="viewDialogFooterCancel" @click="addReturnDialogShow(false)">
							取消
						</div>
					</div>
				</div>
			</el-dialog>
			<!-- 编辑弹框 -->
			<el-dialog :visible.sync="Model.editDialogFlag" top="100px" class="viewDialog">
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">编辑</div>
				</div>
				<div style="padding:30px;background: #fff;">
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>配送类型：
						</div>
						<div class="editDialogRightText">
							<el-select v-model="Model.editDialogFormData.shippingMethod" placeholder="请选择" size="small">
								<el-option label="自提" value="1"></el-option>
								<el-option label="快递" value="0"></el-option>
							</el-select>
						</div>
					</div>
					<div class="editDialogItem" v-show="Model.editDialogFormData.shippingMethod=='1'">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>发货门店：
						</div>
						<div class="editDialogRightText">
							<el-select v-model="Model.editDialogFormData.shipper" placeholder="请选择" size="small">
								<el-option label="天猫" value="0"></el-option>
								<el-option label="京东" value="1"></el-option>
							</el-select>
						</div>
					</div>
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>销售来源：
						</div>
						<div class="editDialogRightText">
							<el-select v-model="Model.editDialogFormData.originChannel" placeholder="请选择" size="small">
								<el-option label="dr1002" value="0"></el-option>
								<el-option label="dr2003" value="1"></el-option>
							</el-select>
						</div>
					</div>
					<div class="editDialogItem">
						<div class="editDialogLeftLabel">
							<span class="editDialogRequire">*</span>销售员：
						</div>
						<div class="editDialogRightText">
							<el-select v-model="Model.editDialogFormData.salesman" placeholder="请选择" size="small">
								<el-option label="张三" value="0"></el-option>
								<el-option label="李四" value="1"></el-option>
							</el-select>
						</div>
					</div>
					<div class="editDialogItem" v-show="Model.editDialogFormData.shippingMethod=='0'">
						<div class="editDialogLeftLabel">
							是否新建地址：
						</div>
						<div class="editDialogRightText">
							<el-radio-group v-model="Model.editDialogNewAddress" @change="changeAddress">
								<el-radio :label="true">是</el-radio>
								<el-radio :label="false">否</el-radio>
							</el-radio-group>
						</div>
					</div>
					<div class="editDialogItem" v-show="Model.editDialogNewAddress==false&&Model.editDialogFormData.shippingMethod=='0'">
						<div class="editDialogLeftLabel">
							请选择地址：
						</div>
						<div class="editDialogItemAddressBox">
							<div v-if="Model.addressList.length==0">
								暂无历史地址
							</div>
							<div class="editDialogItemAddressBoxInfo" v-for="(item,index) in Model.addressList" :key="index">
								<div>
									<span>

										<el-radio v-model="Model.editDialogItemAddressBoxRadio" :label="index">{{item.name}}</el-radio>

									</span>
									<span>{{item.phone}}</span>
								</div>
								<div>
									{{item.address}}
								</div>
							</div>
						</div>
					</div>

					<div v-if="Model.editDialogNewAddress&&Model.editDialogFormData.shippingMethod=='0'">
						<div class="editDialogItem">
							<div class="editDialogLeftLabel">
								<span class="editDialogRequire">*</span>收件人姓名：
							</div>
							<div class="editDialogRightText">
								<el-input size="small" v-model="Model.editDialogFormData.recipientName" placeholder="请输入内容"></el-input>
							</div>
						</div>
						<div class="editDialogItem">
							<div class="editDialogLeftLabel">
								<span class="editDialogRequire">*</span>收件人手机号：
							</div>
							<div class="editDialogRightText">
								<el-input size="small" v-model="Model.editDialogFormData.recipientPhone" placeholder="请输入内容"></el-input>
							</div>
						</div>
						<div class="editDialogItem">
							<div class="editDialogLeftLabel">
								<span class="editDialogRequire">*</span>短信通知手机：
							</div>
							<div class="editDialogRightText">
								<el-input size="small" v-model="Model.editDialogFormData.messagePhone" placeholder="请输入内容"></el-input>
							</div>
						</div>
						<div class="editDialogItem">
							<div class="editDialogLeftLabel">
								收货地址类型：
							</div>
							<div class="editDialogRightText">
								<el-radio-group v-model="Model.editDialogFormData.addressType">
									<el-radio label="大陆" value="0"></el-radio>
									<el-radio label="海外" value="1"></el-radio>
								</el-radio-group>
							</div>
						</div>
						<div class="editDialogItem">
							<div class="editDialogLeftLabel">
								<span class="editDialogRequire">*</span>收货人所在地区：
							</div>
							<div class="editDialogRightText">
								<el-input size="small" v-model="Model.editDialogFormData.location" placeholder="请输入内容"></el-input>
							</div>
						</div>
						<div class="editDialogItem">
							<div class="editDialogLeftLabel">
								<span class="editDialogRequire">*</span>收货人详细地址：
							</div>
							<div class="editDialogRightText">
								<el-input size="small" v-model="Model.editDialogFormData.detailedAddress" placeholder="请输入内容"></el-input>
							</div>
						</div>
					</div>
					<div class="viewDialogFooter">
						<div class="viewDialogFooterSure" @click="updateBaseSaleOrder">
							保存
						</div>
						<div class="viewDialogFooterCancel" @click="onDialogEdit(false,'tableFormInline')">
							取消
						</div>
					</div>
				</div>
			</el-dialog>
			<!-- 变更商品弹框 -->
			<el-dialog title :visible.sync="Model.changeGoodsDialogFlag" class="changeGoodsDialog">
				<div slot="title">
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl" v-show="Model.tableData.length < 2">变更商品</div>
					</div>
				</div>
				<div class="dialogBody" style="width: 1000px;">
					<div class="itemBox">
						<div class="dialogSecTitle" style="border-bottom: 1px dashed #bfbfbf;">
							<el-radio v-model="Model.barCodeRadio" label="1">有明确条码</el-radio>
							<el-form ref="form" label-width="80px" size="small" :inline="true">
								<el-form-item label="条码">
									<el-input placeholder="请输入条码" v-model="Model.filterOption.batchNo" :disabled="Model.barCodeRadio!=1"></el-input>
								</el-form-item>
								<el-form-item label="定制编码">
									<el-input placeholder="请输入定制编码" v-model="Model.filterOption.customCoding" :disabled="Model.barCodeRadio!=1"></el-input>
								</el-form-item>
								<el-form-item>
									<div class="endFormItem normal-btn-group">
										<div class="normal-btn query-btn" :class="Model.barCodeRadio!=1?['disabledBtn']:[]" @click="onSearchSureBarCode">
											<img class="icon" src="@/assets/img/button_search.png"> 查询

										</div>
									</div>
								</el-form-item>
							</el-form>
						</div>
					</div>
					<div class="itemBox">
						<div class="dialogSecTitle">
							<el-radio v-model="Model.barCodeRadio" label="2">无明确条码</el-radio>
						</div>
						<p class="tips" v-show="Model.barCodeRadio!=2">选择后填写更具体的查询条件</p>
						<!-- 无明确条码 -->
						<div class="nocode" v-show="Model.barCodeRadio!=1">
							<div class="step-first">
								<div class="thestepTitle">
									<span>1</span>
									<p>第一步：请选择款式信息</p>
								</div>
								<advancedSearch :option="Model.filterOption2" @getChild="showNotSureBarCodeP1"></advancedSearch>
							</div>
							<div class="step-sec">
								<div class="thestepTitle">
									<span>2</span>
									<p>第二步：请选择具体参数</p>
								</div>
								<div class="sliderBox">
									<div class="sliderItem">
										<div>
											<div class="sliderItemLabel">钻重范围</div>
											<div class="sliderItemValue">：
												{{Model.sliderSelect.weight.sliderVal[0]+'~'+Model.sliderSelect.weight.sliderVal[1]}}</div>
											<el-select style="width:100px" size="small" v-model="Model.sliderSelect.weight.value" placeholder="请选择"
											 @change="onSelectChange('weight')">
												<el-option v-for="(item,index) in Model.sliderSelect.weight.option" :key="index" :label="item.label" :value="item.value"></el-option>
											</el-select>
											分(100分=1克拉)
										</div>
										<div>
											<el-slider v-model="Model.sliderSelect.weight.sliderVal" range :min="Model.weightMin" :max="Model.weightMax"></el-slider>
										</div>
									</div>
									<!--<div class="sliderItem">
                	<div>
                		<div class="sliderItemLabel">手寸范围</div>
                		<div class="sliderItemValue">：
                			{{Model.sliderSelect.size.sliderVal[0]+'~'+Model.sliderSelect.size.sliderVal[1]}}</div>
                		<el-select style="width:100px" size="small" v-model="Model.sliderSelect.size.value" placeholder="请选择" @change="onSelectChange('size')">
                			<el-option v-for="(item,index) in Model.sliderSelect.size.option" :key="index" :label="item.label" :value="item.value"></el-option>
                		</el-select>
                		mm
                	</div>
                	<div>
                		<el-slider v-model="Model.sliderSelect.size.sliderVal" range></el-slider>
                	</div>
                </div>-->
								</div>
							</div>
							<advancedSearch :option="Model.filterOption3" @getChild="showNotSureBarCodeP2" @onSearch="onSearchNoCode"
							 @onClear="toClear"></advancedSearch>
						</div>
						<!-- 表格 -->
						<el-row class="detailTable">
							<div class="detailTableItemTitle">
								<span class="detailTableImgSmall"></span>
								<p class="text">商品信息列表</p>
							</div>
							<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
								<el-table :data="Model.barCodeTable" style="width: 100%">
									<!-- <el-table-column type="selection" width="50" fixed></el-table-column> -->
									<el-table-column width="150" fixed>
										<template slot-scope="scope">
											<el-radio v-model="Model.dialogTableSelect" :label="scope.row">{{scope.row.poCode}}</el-radio>
										</template>
									</el-table-column>
									<el-table-column prop="photoUrl" label="图片" width="140"></el-table-column>
									<el-table-column prop="modelName" label="款式名称" width="120"></el-table-column>
									<el-table-column prop="category" label="品类" width="140"></el-table-column>
									<el-table-column prop="aSeriesOf" label="系列" width="120"></el-table-column>
									<el-table-column prop="barCode" label="条码" width="140"></el-table-column>
									<el-table-column prop="handInch" label="手寸" width="120"></el-table-column>
									<el-table-column prop="bracketMaterial" label="材质" width="140"></el-table-column>
									<el-table-column prop="drillingWeight" label="钻重" width="120"></el-table-column>
									<el-table-column prop="shape" label="主石形状" width="140"></el-table-column>
									<el-table-column prop="appearance" label="主石外观" width="120"></el-table-column>
									<el-table-column prop="cut" label="切工" width="120"></el-table-column>
									<el-table-column prop="polishing" label="抛光" width="120"></el-table-column>
									<el-table-column prop="color" label="颜色" width="120"></el-table-column>
									<el-table-column prop="cleanliness" label="净度" width="120"></el-table-column>
									<el-table-column prop="symmetric" label="对称" width="120"></el-table-column>
									<el-table-column prop="price" label="价格/RMB" width="120"></el-table-column>
								</el-table>
								<!-- 分页 -->
								<el-row class="pagination-cont">
									<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="Model.pager.params.pageIndex"
									 :page-sizes="Model.pager.pageSizeArr" :pager-count="5" :page-size="Model.pager.params.pageSize" layout="total, sizes, prev, pager, next, jumper"
									 :total="Model.pager.pageTotal"></el-pagination>
								</el-row>
							</div>
							<div class="formInline">
								<div>
									<span>
										是否需要艺术字：
									</span>
									<span>
										<el-select size="small" v-model="Model.shouldLettering" placeholder="请选择" style="width:100px">
											<el-option label="否" :value="false"></el-option>
											<el-option label="是" :value="true"></el-option>
										</el-select>
									</span>
								</div>
								<div>
									<span>
										刻字：
									</span>
									<span>
										<el-input size="small" style="width:150px" v-model="Model.letteringContent" placeholder="请输入内容"></el-input>
									</span>
									<span class="letterIcon" @click="Model.letteringContent+='&'">&</span>
									<span class="letterIcon" @click="Model.letteringContent+='❤'">❤</span>
								</div>
							</div>
							<div class="formInline">
								<div>
									<span>
										是否高配：
									</span>
									<span>
										<el-radio-group v-model="Model.isHighClass" size="small">
											<el-radio :label="false">否</el-radio>
											<el-radio :label="true">是</el-radio>
										</el-radio-group>
									</span>
								</div>
								<div>
									<span>
										是否外圈log：
									</span>
									<span>
										<el-radio-group v-model="Model.isLog" size="small">
											<el-radio :label="false">否</el-radio>
											<el-radio :label="true">是</el-radio>
										</el-radio-group>
									</span>
								</div>
							</div>
							<div class="footerBtnBox">
								<div class="footerBtn" @click="addGoodToTable">添加商品</div>
								<div class="footerBtn" @click="toggleDialog(false)">取消</div>
							</div>
						</el-row>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
	@import "./index.less";
</style>
